<template>
    <div class="my-4">
        <n-grid x-gap="12" :cols="16">
            <n-gi :span="3">
                <div class="flex items-center justify-center h-full">
                    <div class="rounded-md border-2 border-solid border-slate-300">
                        <n-image :src="image_url" object-fit="fill"  width="100%" :preview-disabled="true" />
                    </div>
                </div>
            </n-gi>
            <n-gi :span="4">
                <n-flex vertical>
                    <span class="text-xl">
                        {{ data.name }}
                    </span>
                    <n-flex>
                        <div>
                            <span class="text-mg font-bold">
                                场景描述：
                            </span>
                            <n-ellipsis :line-clamp="3" expand-trigger="click" :tooltip="false">
                                {{ data.description }}
                                <!-- 在股市的震荡与波动中，偶尔会出现一种特殊的投资现象，被称为金针探底。这种情况发生在股价经历了长时间的下跌后，逐渐走弱至谷底之际，犹如一根细长的金针，在图表上显现出来，用于判断市场的走势是否即将反转。 -->
                            </n-ellipsis>
                        </div>
                    </n-flex>
                </n-flex>
            </n-gi>
            <n-gi :span="7">
                <n-flex justify="space-around" class="justify-center h-full">
                    <n-flex class="h-full " vertical justify="center">
                        <span class="text-slate-400">属性个数</span>
                        <span class="text-2xl">{{data.attribute_count}}个</span>
                    </n-flex>


                </n-flex>

            </n-gi>

            <n-gi :span="1">
                <div class="flex items-center h-full">
                    <n-button class="mx-2" type="primary" @click="goManage()">管理</n-button>
                    <n-button  type="error">删除</n-button>
                </div>
            </n-gi>
        </n-grid>

    </div>
</template>

<script setup>
import { ref,onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useScenarioStore } from '@/stores/scenarioStore';
const scenarioStore = useScenarioStore();
const props = defineProps(["data"]);
const data = props.data;
const router = useRouter();
const image_url = ref('');
const setImageUrl = async () => {
    let result = await scenarioStore.getImageByName(data.image);
    image_url.value = result;
}
onMounted(async () => {
    await setImageUrl();
})
const goManage = async()=>{
    await scenarioStore.getScenarioById(props.data.id);
    localStorage.setItem('current_scenario_id', props.data.id);
    router.replace({
        path:"/scenario/manage"
    });
}
</script>